<template>
  <div class="model">
    <div class="title">
      <div>收入记录统计</div>
      <div>
        <el-select
          v-model="queryForm.type"
          size="mini"
          style="width: 70px"
          @change="changeType"
        >
          <el-option value="1" label="年" />
          <el-option value="2" label="月" />
          <el-option value="3" label="天" />
        </el-select>
        <el-date-picker
          v-model="queryForm.startTime"
          size="mini"
          :type="dateType"
          placeholder="开始日期"
          :value-format="format"
          style="width: 130px"
          @change="changeStartTime"
        />
        <span style="font-weight: 400">~</span>
        <el-date-picker
          v-model="queryForm.endTime"
          size="mini"
          :type="dateType"
          placeholder="结束日期"
          :value-format="format"
          style="width: 130px"
          @change="changeEndTime"
        />
      </div>
    </div>
    <div id="chart_icome"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { postIncome } from "@/api/home/report";
export default {
  data() {
    return {
      queryForm: {
        startTime: "",
        endTime: "",
        type: "1", // 1按年，2按月，3按天
      },
      dataList: [], // 数据列表
    };
  },
  mounted() {
    this.getIncome();
  },
  computed: {
    dateType() {
      let { type } = this.queryForm;
      return type == 1 ? "year" : type == 2 ? "month" : "date";
    },
    format() {
      let { type } = this.queryForm;
      return type == 1 ? "yyyy" : type == 2 ? "yyyy-MM" : "yyyy-MM-dd";
    },
  },
  methods: {
    // 类型
    changeType(v) {
      this.queryForm.startTime = "";
      this.queryForm.endTime = "";
      this.getIncome();
    },
    // 开始日期
    changeStartTime(v) {
      console.log(v);
      this.getIncome();
    },
    // 结束日期
    changeEndTime(v) {
      console.log(v);
      this.getIncome();
    },
    // 获取收入记录统计
    getIncome() {
      postIncome(this.queryForm).then((res) => {
        this.dataList = res.data;
        this.$nextTick(this.draw());
      });
    },
    // 绘制图表
    draw() {
      let xAxisData = this.dataList.map((i) => i.key);
      let yAxisData = this.dataList.map((i) => i.value);

      let dom = document.getElementById("chart_icome");
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom);

      var option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            //自定义样式
            const { type } = this.queryForm;
            let unit = type == 1 ? "年" : type == 2 ? "月" : type == 3 ? "日" : "";
            let res = "<div style='font-size: 14px;'>" + params[0].axisValue + unit + "</div>";
            params.forEach((item) => {
              res +=
                "<div class='tool-row'>" +
                "<div><div class='round' style='background: linear-gradient(" +
                item.color.colorStops.map((i) => i.color).toString() +
                ");'></div>" +
                item.seriesName +
                "：</div>" +
                "<span>" +
                item.data +
                "元</span></div>";
            });
            return res;
          },
        },
        legend: {
          icon: "roundRect",
          data: ["收入记录"],
        },
        backgroundColor: "#fff",
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          right: "4%",
          feature: {
            saveAsImage: {},
            magicType: { show: true, type: ["line", "bar"] },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "收入记录",
            data: yAxisData,
            type: "line",
            smooth: true,
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.model {
  flex: 1;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
  &:hover {
    box-shadow: 0 0 10px #409eff;
  }
  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #chart_icome {
    width: 100%;
    height: 400px;
  }
}
::v-deep .tool-row {
  display: flex;
  min-width: 110px;
  margin-top: 4px;
  justify-content: space-between;
  .round {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
  }
  span {
    font-size: 14px;
    font-weight: 600;
  }
}
</style>
